<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/1.css">
</head>

<body>
    <div class="container">
        <div class="small">
            <div class="wrap"></div>
            <img src="../images/timg.jpg" alt="">
            <span class="grayBox"></span>
        </div>
        <div class="choice-btn">
            <img src="../images/timg.jpg" alt="">
            <img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg"
                alt="">
        </div>
    </div>

    <div class="big">
        <img src="../images/timg.jpg" alt="">
    </div>

    <script>
        function enlarge() {
            this.small = document.querySelector(".small");
            this.big = document.querySelector(".big");
            this.box = this.small.querySelector(".grayBox");
            this.img = this.big.querySelector("img")
            this.index = 0
            this.s_img = document.querySelector(".small img")
            this.btns = document.querySelectorAll(".choice-btn img")
            console.log(this.btns)
            this.box_size = {
                width: parseInt(getComputedStyle(this.box).width),
                height: parseInt(getComputedStyle(this.box).height)
            }
            this.small_size = {
                width: this.small.offsetWidth,
                height: this.small.offsetHeight
            }
            this.big_size = {
                width: parseInt(getComputedStyle(this.big).width),
                height: parseInt(getComputedStyle(this.big).height)
            }
            this.img_size = {
                width: parseInt(getComputedStyle(this.img).width),
                height: parseInt(getComputedStyle(this.img).height),
            }
            this.event()
        }
        enlarge.prototype.event = function () {
            let _this = this
            _this.small.onmouseover = function () {
                _this.box.style.display = "block"
                _this.big.style.display = "block"
            }
            _this.small.onmouseout = function () {
                _this.box.style.display = "none"
                _this.big.style.display = "none"
            }
            _this.small.onmousemove = function (e) {
                e = e || window.event
                let x = e.offsetX - 50
                let y = e.offsetY - 50
                let max_l = _this.small_size.width - _this.box_size.width - 8;
                let max_t = _this.small_size.height - _this.box_size.height - 8;

                if (x < 0) {
                    x = 0
                }
                if (x > 300) {
                    x = 300
                }
                if (y < 0) {
                    y = 0
                }
                if (y > 300) {
                    y = 300
                }


                _this.box.style.left = x + "px"
                _this.box.style.top = y + "px"

                let le_bai = (x / max_l).toFixed(2)
                let to_bai = (y / max_t).toFixed(2)

                let weiyix = _this.img_size.width - _this.big_size.width

                let weiyiy = _this.img_size.height - _this.big_size.height
                _this.img.style.left = -weiyix * le_bai + "px"

                _this.img.style.top = -weiyiy * to_bai + "px"

            }
            for (let i = 0; i < this.btns.length; i++) {
                this.btns[i].onmouseover = function () {
                    // _this
                    _this.s_img.src = this.src
                    _this.img.src = this.src;
                }

            }
            _this.small.onmousewheel = function (e) {
                e = e || window.event;
                let x = (getComputedStyle(_this.img).width).slice(0, 4)
                let y = (getComputedStyle(_this.img).width).slice(0, 4)
                if (e.wheelDelta < 0) {
                    x = x - 50
                    y = y - 50
                }
                if (e.wheelDelta > 0) {
                    x = x * 1 + 50
                    y = y * 1 + 50
                }
                _this.img.style.width = x + "px"
                _this.img.style.height = y + "px"
            }
        }
        let fangda = new enlarge()
    </script>

</body>

</html>